<template>
  <div class="retrieval-new">
    <div class="search-top w-1350px m-auto flex items-center h-50px">
      <img src="@/assets/imgs/top-logo.png" alt="" class="w-40px m-r-15px"/>
      <div class="n-t-title c-#2A6249 font-700 font-size-20px">出版物数字资源库</div>
    </div>
    <div class="r-n-middle">
      <div>
        <div class="m-radio m-b-10px">
          <el-radio-group v-model="defaultLib" @change="activateTab">
            <el-radio v-for="(item, index) in library" :key="item.id" :label="item">
              {{ item.name }}
            </el-radio>
            <!--            <el-radio :value="2">音频</el-radio>-->
            <!--            <el-radio :value="3">视频</el-radio>-->
          </el-radio-group>
        </div>
        <div class="m-input-search">
          <el-input
            v-model="advParams.keyword"
            placeholder="战争"
            class="input-with-select"
            size="large"
            :suffix-icon="Camera"
          >
            <template #prepend>
              <el-select v-model="typeSelect" placeholder="全文检索" clearable style="width: 115px"
                         size="large">
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" @click="search"/>
            </template>
          </el-input>
          <div class="s-btn cursor-pointer" @click="advancedSearch">高级检索</div>
        </div>
      </div>
    </div>

    <div class="r-n-content">
      <div class="c-left" v-loading="treeLoading" element-loading-text="加载中...">
        <div class="classification" v-for="nav in navs" :key="nav">
          <el-tree
            ref="treeRef"
            v-if="nav.tree"
            :check-on-click-node="false"
            :data="nav.tree"
            node-key="id"
            :props="{
                label: 'name',
                children: 'children'
              }"
            show-checkbox
            @check="
                (data, checked, indeterminate) =>
                  handleCheckChange(data, checked, indeterminate, nav.fieldName)
              "
            :render-content="renderContent"
          />
        </div>
        <div class="classification">
          <el-tree
            ref="treeRef"
            v-if="knowList.length>0"
            :check-on-click-node="false"
            :data="knowList"
            node-key="id"
            :props="{
                label: 'name',
                children: 'children'
              }"
            show-checkbox
            @check="
                (data, checked, indeterminate) =>
                  handleCheckChange(data, checked, indeterminate, nav.fieldName)
              "
            :render-content="renderContent"
          />
        </div>
      </div>
      <div class="c-middle overflow-auto">
        <div class="m-top flex items-center">
          <div class="m-t-left">
            共搜索到<span>{{ total }}</span
          >条信息
          </div>
          <div class="m-t-right">
            <el-pagination background :page-size="searchParams.pageSize" layout="prev, pager, next"
                           :total="total" v-model:current-page="searchParams.pageNo" size="small"
                           @current-change="handleCurrentChange"/>
          </div>
        </div>
        <div class="m-middle">
          <div class="m-left">
            <div class="m-l-checkbox">
              <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"
              >
                已选择{{ retrieveDataListRef?.checkedList?.length }}条
              </el-checkbox>
            </div>
            <el-button type="primary" :icon="Close" size="small" @click="handleClear">清除</el-button>
            <el-button :icon="Download" size="small" @click="handleDownload">下载</el-button>
          </div>
          <div class="m-right">
            排序：
            <el-button
              @click="order(item.fieldName,item.sortMethod)"
              class="m-r-condition"
              v-for="item in sort"
              text
            >
              {{ item.name }}
              <el-icon v-if="item.sortMethod == 'asc'" class="el-icon--right">
                <ArrowUp/>
              </el-icon>
              <el-icon v-else class="el-icon--right">
                <ArrowDown/>
              </el-icon>
            </el-button>
          </div>
        </div>
        <component :is="retrieveDataListComponent" :keyword="advParams.keyword" :dataList="dataList"
                   ref="retrieveDataListRef"
                   v-model="isIndeterminate"></component>
        <el-pagination background :page-size="searchParams.pageSize" layout="prev, pager, next"
                       :total="total" v-model:current-page="searchParams.pageNo" size="small"
                       @current-change="handleCurrentChange" class="mt-4"/>
      </div>
      <div class="r-c-right">
        <div class="c-r-top">
          <div class="t-tabs-box t-tabs-top">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="相关事件" name="first">
                <div class="r-tabs-tags">
                  <el-tag
                    v-for="item in relatedEvents"
                    :key="item.label"
                    :type="item.type"
                    effect="light"
                    round
                  >
                    {{ item.label }}
                  </el-tag>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="t-tabs-box t-tabs-middle">
            <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="相关人物" name="first">
                <div class="r-tabs-character">
                  <div class="t-c-box" v-for="item in relatedPeople" :key="item.label">
                    <div class="t-round-box"></div>
                    <div class="t-c-text">{{ item.label }}</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="t-tabs-box t-tabs-bottom">
            <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="关键词推荐" name="first">
                <div class="r-tabs-word">
                  <wordCloud></wordCloud>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="c-r-middle"></div>
        <div class="c-r-bottom"></div>
      </div>
    </div>


    <!--   高级检索弹窗  -->
    <el-dialog
      v-model="advancedSearchVisible"
      title="高级检索"
      :before-close="handleClose"
      class="advancedDialog"
      width="60%"
    >
      <div class="retrieval">
        <el-form :model="queryParams" class="form m-t-10px box-border w-100%">
          <el-form-item class="form_item box-border p-10px"
                        v-for="(its, inds) in advField"
                        :key="inds">
            <el-row :gutter="10" v-if="inds == 0">
              <el-col :span="5">
                <el-select v-model="advField[inds]"
                           @change="(value) => selectField(value, inds)" placeholder="请选择检索类型"
                           clearable>
                  <el-option style="padding: 0 32px 0 20px" :label="item.fieldDesc"
                             :value="item.fieldName"
                             v-for="item in defaultLib.advField" :key="item"/>
                </el-select>
              </el-col>
              <!-- 高级检索 -->
              <el-col :span="15" v-if="fieldType[inds] == 'string'">
                <el-input
                  v-model="advValue[inds]"
                  placeholder="请输入检索内容"
                  clearable
                  @input="isSearch = false"
                />
              </el-col>
              <el-col :span="15"
                      v-if="fieldType[inds] == 'date' || fieldType[inds] == 'datetime'">
                <el-date-picker
                  v-model="advValue[inds]"
                  type="daterange"
                  range-separator="To"
                  start-placeholder="请输入起始时间"
                  end-placeholder="请输入终止时间"
                  style="width: 96.5%"
                  format="YYYY/MM/DD"
                  value-format="YYYY/MM/DD"
                />
              </el-col>
              <!--                  同音查询：-->
              <!--                  <el-switch v-model="queryParms.homo"></el-switch>-->
              <!--                  <el-popover placement="top-start" effect="dark" :width="180" trigger="hover"-->
              <!--                              content="同音词查询功能只支持“标题”或“名称”查询">-->
              <!--                    <template #reference>-->
              <!--                      <el-icon>-->
              <!--                        <QuestionFilled/>-->
              <!--                      </el-icon>-->
              <!--                    </template>-->
              <!--                  </el-popover>-->
              <el-col :span="3">
                <div class="box-border flex">
                  <el-button type="primary" class="addbtn" @click="addCondition">+
                  </el-button>
                  <el-button type="primary" v-if="inds>0" class="addbtn"
                             @click="delCondition(inds)">-
                  </el-button>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-else>
              <el-col :span="5">
                <el-select v-model="connect[inds-1]" placeholder="请选择检索条件" clearable>
                  <el-option style="padding: 0 32px 0 20px" :label="item.label"
                             :value="item.value"
                             v-for="item in conditionOptions2" :key="item"/>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select v-model="advField[inds]"
                           @change="(value) => selectField(value, inds)" placeholder="请选择检索类型"
                           clearable>
                  <el-option style="padding: 0 32px 0 20px" :label="item.fieldDesc"
                             :value="item.fieldName"
                             v-for="item in defaultLib.advField" :key="item"/>
                </el-select>
              </el-col>
              <!-- 标准检索 -->
              <el-col :span="10" v-if="fieldType[inds] == 'string'">
                <el-input
                  v-model="advValue[inds]"
                  placeholder="请输入检索内容"
                  clearable
                  @input="isSearch = false"
                />
              </el-col>
              <el-col :span="10"
                      v-if="fieldType[inds] == 'date' || fieldType[inds] == 'datetime'">
                <el-date-picker
                  v-model="advValue[inds]"
                  type="daterange"
                  range-separator="To"
                  start-placeholder="请输入起始时间"
                  end-placeholder="请输入终止时间"
                  style="width: 96.5%"
                  format="YYYY/MM/DD"
                  value-format="YYYY/MM/DD"
                />
              </el-col>
              <el-col :span="3">
                <div class="box-border flex">
                  <el-button type="primary" v-if="
                        inds + 1 == queryParms.advancedSearches.length &&
                        queryParms.advancedSearches.length <= 4
                      " class="addbtn" @click="addCondition">+
                  </el-button>
                  <el-button type="primary" v-if="inds != 0" class="addbtn"
                             @click="delCondition(inds)">-
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="searchBtn h-50px flex items-center justify-center">
          <el-button type="primary" @click="() => ((isSearch = true), search())" class="p-10px"
          >检索
          </el-button
          >
          <el-button @click="reset">重置</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <SearchImage ref="searchImageRef" @success="searchImage"></SearchImage>
</template>
<script setup lang="ts">
import {onMounted, reactive, toRefs} from 'vue'
import * as AdvApi from '@/api/adv/index'
import {
  Search,
  Menu as IconMenu,
  Files,
  ArrowUp,
  ArrowDown,
  Download,
  Close,
  Camera
} from '@element-plus/icons-vue'
import ICON from '@/assets/imgs/ICON.png'
import BookList from './components/BookList.vue'
import PictureList from './components/PictureList.vue'
import AudioList from './components/AudioList.vue'
import VideoList from './components/VideoList.vue'
import wordCloud from './wordCloud.vue'
import SearchImage from '@/views/adv/SearchImage.vue'


// 数据定义
const retrieveDataListComponent = shallowRef()
const retrieveDataListRef = ref(null)
const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
const selectNav = ref([])
const isSearch = ref(false)
const knowList = ref([])
const selectField = (value: any, index) => {
  const defaultAdv = defaultLib.value.advField
  defaultAdv.forEach((res) => {
    if (res.fieldName == value) {
      if (res.fieldType == 'date' || res.fieldType == 'datetime') {
        fieldType.value.splice(index, 1, res.fieldType)
      } else {
        fieldType.value.splice(index, 1, 'string')
      }
    }
  })
}
const conditionOptions = [
  {label: '包含', value: 1},
  {label: '不包含', value: 2}
] //普通检索条件
const conditionOptions2 = [
  {label: '与', value: 'AND'},
  {label: '或', value: 'OR'},
  {label: '非', value: 'NOT'}
] //普通检索条件
const typeOptions = [] //检索类型
const publicationTime = ref('')
// 选项卡名称
const activeName = ref('first')
const activeName1 = ref('first')

// 标签项定义
const relatedEvents = ref([
  {type: 'primary', label: '百团大战'},
  {type: 'primary', label: '台儿庄大捷'},
  {type: 'primary', label: '长征'}
])
const relatedPeople = ref([
  {type: 'primary', label: '毛泽东'},
  {type: 'primary', label: '朱德'},
  {type: 'primary', label: '百团大战'}
])

// 基本数据
const typeSelect = ref('')
const input3 = ref('')
const radio = ref('42')
const buttons = reactive([
  {type: 'primary', text: '发布时间', state: true},
  {type: 'primary', text: '价格', state: true},
  {type: 'primary', text: '相关度', state: true},
  {type: 'primary', text: '下载量', state: true}
])

const isIndeterminate = ref(false)
const checkAll = ref(false)
const library = ref([])
const defaultLib = ref({})
const sortMethod = ref('desc')

const advField = ref([])
const fieldType = ref([])
const advValue = ref([])
const connect = ref([])
const sort = ref([])
const dataList = ref([])
const total = ref(0)

// 左侧树结构导航
const navs = ref([])
const defaultNavNode = ref([])
const searchParams = ref({
  type: 1,
  keyword: '',
  metaId: '',
  navigation: {},
  advField: [],
  fieldType: [],
  connect: [],
  advValue: [],
  features: undefined,
  sort: {},
  libType: 1,
  pageNo: 1,
  pageSize: 10
})
const advancedSearchVisible = ref(false)
const treeLoading = ref(false)
const searchImageRef = ref()
const searchImage = (features) => {
  advParams.value.features = features
  activateTab(library.value.filter(item => item.id === 1000001)[0])
  //search()
}
const getKnow = async () => {
  const res = await AdvApi.know({})
  knowList.value = res
}
// 页面挂载时初始化
onMounted(() => {
  window.document.querySelector(".el-input__suffix-inner").style.cursor = "pointer";
  window.document.querySelector(".el-input__suffix-inner").onclick = function (e) {
    e.stopPropagation(); //阻止事件冒泡
    searchImageRef.value.open()
  }
  index()
  getKnow()
  // addCondition()
})
const advParams = ref({
  type: 1,
  keyword: undefined,
  metaId: undefined,
  navigation: {},
  advField: undefined,
  fieldType: undefined,
  connect: undefined,
  advValue: undefined,
  features: undefined,
  sort: {},
  libType: 1,
  pageNo: 1,
  pageSize: 10
})
const order = (field, order) => {
  sort.value.forEach((res) => {
    if (res.fieldName == field) {
      if (res.sortMethod == 'desc') {
        res.sortMethod = 'asc'
      } else {
        res.sortMethod = 'desc'
      }
    }
  })
  if (order == 'desc') {
    advParams.value.sort[field] = 'asc'
  } else {
    advParams.value.sort[field] = 'desc'
  }
  search()
}
const handleClose = () => {
  advancedSearchVisible.value = false
}
// 数据定义
const data = reactive({
  queryParms: {
    keyWord: '', //标准检索关键字
    keyWord1: '', //标准二次检索关键字
    searchType: 0, //检索条件类型 0标准 1高级
    ts: '', //发布时间排序 1正序 否则为倒序
    homo: false, //同音词是否开启
    pr: '', //价格排序 1正序 否则为倒序
    sort: [], //282 //分类类型
    advancedSearches: [
      {
        fnType: 'fnTitle', //普通检索类型
        keyWord: '', //普通检索关键字
        option: '1', //普通检索内容是否包含
        symbol: '==', // 普通检索条件 与为== 或为||
        startScope: 1, // 出版时间状态
        startTime: '', // 出版起始时间
        endTime: '' // 出版终止时间
      }
    ], //普通检索参数
    page: 1,
    size: 10,
    listSet: 1
  }, //列表请求参数

})
let {
  queryParms,
} = toRefs(data)
// 普通检索添加检索条件
const addCondition = () => {
  advField.value.push(defaultLib.value.advField[0].fieldName)
  fieldType.value.push('string')
  connect.value.push('AND')
}
// 普通检索删除检索条件
const delCondition = (index) => {
  advField.value.splice(index, 1)
  fieldType.value.splice(index, 1)
  advValue.value.splice(index, 1)
  connect.value.splice(index - 1, 1)
}

// 清除
const handleClear = () => {
  handleClose()
  advParams.value = {
    type: 1,
    keyword: undefined,
    metaId: undefined,
    navigation: advParams.value.navigation,
    advField: undefined,
    fieldType: undefined,
    connect: undefined,
    advValue: undefined,
    features: undefined,
    sort: {},
    libType: 1,
    pageNo: 1,
    pageSize: 10
  }
  search()
}
// 下载
const handleDownload = () => {
  console.log('下载...');
}
// 切换分页
const handleCurrentChange = async (val) => {
  advParams.value.pageNo = val
  await search()
}
const advancedSearch = () => {
  advancedSearchVisible.value = true
  advParams.value.type = 2
}
const handleButton = (index) => {
  buttons[index].state = !buttons[index].state
  switch (index) {
    case 0:
      console.log('发布时间', buttons[index].state);
      break;
    case 1:
      console.log('价格', buttons[index].state);
      break;
    case 2:
      console.log('相关度', buttons[index].state);
      break;
    case 3:
      console.log('下载量', buttons[index].state);
      break;
    default:
      break;
  }
}
const handleCheckAllChange = (val) => {
  retrieveDataListRef.value.checkedList = val ? retrieveDataListRef.value.dataList.map(item => item.id) : []
  isIndeterminate.value = false
}
const handleClick = (tab, event) => {
  console.log(tab, event)
}

// 分类列表
const fetchNavigationData = async (data) => {
  treeLoading.value = true

  const navigationPromises = data.map(async (navigation) => {
    const res = await AdvApi.classify(
      navigation.fieldName,
      navigation.classifyCode,
      searchParams.value
    )
    navigation.tree = res
    // defaultNavNode.value.unshift(res[0].id)
  })
  await Promise.all(navigationPromises)
  navs.value = data
  treeLoading.value = false
  console.log(defaultLib.value)
}
// 检索
// const searchList = async () => {
//   if (searchParams.value.type === 2) {
//     if (advField.value.some((_, i) => !advValue.value[i])) {
//       message.error('请输入检索内容')
//       return
//     }
//
//     searchParams.value = {
//       ...searchParams.value,
//       advField,
//       advValue,
//       connect,
//       fieldType
//     }
//   }
//
//   searchParams.value.metaId = defaultLib.value.id
//   const res = await AdvApi.select(searchParams.value)
//   dataList.value = res.list
//   total.value = res.total
//
//   library.value = library.value.map((item) =>
//     item.id === defaultLib.value.id ? {...item, total: total.value} : item
//   )
//
//   fetchNavigationData(defaultLib.value.navField)
// }
// 更新配置按钮
const updateSortAttributes = () => {
  // sort.value = sortFields.map((res) => ({
  //   name: res.fieldDesc,
  //   fieldName: res.fieldName,
  //   sortMethod: 'desc'
  // }))
  switch (defaultLib.value.id) {
    case 42:
      // 图书库
      retrieveDataListComponent.value = BookList
      break
    case 1000001:
      // 图片库
      retrieveDataListComponent.value = PictureList
      break
    case 1000003:
      // 音频库
      retrieveDataListComponent.value = AudioList
      break
    case 1000002:
      // 视频库
      retrieveDataListComponent.value = VideoList
      break
  }
}

// 初始化接口
const search = async () => {
  if (advParams.value.type == 2) {//高级检索
    for (let i = 0; i < advField.value.length; i++) {
      if (!advValue.value[i]) {
        message.error("请输入检索内容")
        return
      }
    }
    advParams.value.advField = advField
    advParams.value.advValue = advValue
    advParams.value.connect = connect
    advParams.value.fieldType = fieldType
  }
  advParams.value.metaId = defaultLib.value.id
  const res = await AdvApi.select(advParams.value);
  console.log(res)
  dataList.value = res.list
  total.value = res.total
  library.value = library.value.map(item => {
    if (item.id === defaultLib.value.id) {
      item.total = total.value
    }
    return item
  })
  updateSortAttributes()
  navigation(defaultLib.value.navField)
  if (advParams.value.type == 2) {
    handleClose()
  }
}
const navigation = (navigations) => {
  console.log("navigation")
  navigations.forEach(async (navigation) => {
    if (navigation.fieldType == 'classify') {//获取分类导航
      const res = await AdvApi.classify(navigation.fieldName, navigation.classifyCode, advParams.value);
      navigation.tree = res
      defaultNavNode.value.splice(0, 0, res[0].id)
    } else if (navigation.fieldType == 'label') {//获取标签导航
      const res = await AdvApi.label(navigation.fieldName, navigation.classifyCode, advParams.value);
      navigation.tree = res
      defaultNavNode.value.splice(0, 0, res[0].id)
    }
  })
  navs.value = navigations
  console.log(defaultLib.value)
}
const index = async () => {
  library.value = await AdvApi.index()
  defaultLib.value = library.value[0]
  defaultLib.value.sortField.forEach((res) => {
    const sortAttr = {
      name: res.fieldDesc,
      fieldName: res.fieldName,
      sortMethod: 'desc'
    }
    sort.value.push(sortAttr)
  })
  advField.value.push(defaultLib.value.advField[0].fieldName)
  fieldType.value.push(defaultLib.value.advField[0].fieldType)

  // activeSort.value = defaultLib.value.sortField[0].fieldName
  // sortMethod.value = activeSort.value + '.desc'
  await search()
}
// 库类型切换
const activateTab = async (item) => {
  defaultLib.value = item
  sort.value = []
  fieldType.value = []
  advField.value = []
  dataList.value = []
  defaultLib.value.sortField.forEach((res) => {
    const sortAttr = {
      name: res.fieldDesc,
      fieldName: res.fieldName,
      sortMethod: 'desc'
    }
    sort.value.push(sortAttr)
  })
  console.log(defaultLib.value)
  if (defaultLib.value.advField.length > 0) {
    advField.value.push(defaultLib.value.advField[0].fieldName)
  }
  if (defaultLib.value.advField.length > 0) {
    fieldType.value.push(defaultLib.value.advField[0].fieldType)
  }
  await search()
}
// 树形组件复选框选中事件
const handleCheckChange = async (data, checked, indeterminate, fieldName) => {
  selectNav.value.splice(0, 0, data.id)
  advParams.value.navigation[fieldName] = checked.checkedKeys
  const res = await AdvApi.select(advParams.value)
  dataList.value = res.list
}
// 自定义内容渲染树形列表
const renderContent = (h, {node, data, store}) => {
  const {valueSetList} = data
  return h(
    'span',
    {
      class: `w-100% text-#fff m-l-4px treeContent ${node.level == 1 ? 'p-l-10px' : 'p-0px'}`,
      title: node.label
    },
    h('img', {
      class: `${node.level == 1 ? 'w-15px m-r-5px' : 'w-0px'}  align-middle`,
      src: ICON
    }),
    h(
      'span',
      {class: `${node.level == 1 ? 'text-15px' : 'text-14px'}`},
      `${node.label} ${
        node.level !== 1 && data.value ? '(' + data.value + ')' : ''
      }`
    )
  )
}
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

::v-deep(.el-radio__label) {
  color: #ffffff;
}

::v-deep(.el-menu) {
  background: linear-gradient(270deg, #2f7e55 0%, #295f48 100%);
  --bg-color: #2f7c54;
  --text-color: #ffffff;
  --el-menu-text-color: #fff;
  --el-menu-hover-text-color: #fff;
  --el-menu-bg-color: #2f7c54;
  --el-menu-hover-bg-color: #2f7c54;
  --el-menu-active-color: #ffd04b;
  --el-menu-level: 1;
}

.m-input-search {
  :deep(.el-input__wrapper) {
    width: 500px;
  }
}

::v-deep(.b-checkbox-color-red) {
  color: #ff0000 !important;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.retrieval-new {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f6f6f6;

  .r-n-top {
    padding: 0 200px;
    height: 80px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .n-t-title {
      margin-left: 35px;
      font-family: HarmonyOS Sans SC;
      font-size: 40px;
      font-weight: bold;
      display: flex;
      align-items: center;
      letter-spacing: 0px;
      font-feature-settings: 'kern' on;
      color: #2a6249;
    }
  }

  .r-n-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 160px;
    background-image: url(@/assets/imgs/top-background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .m-radio {
      margin: 0 350px 10px 0;
    }

    .m-input-search {
      display: flex;
      justify-content: center;
      align-items: center;

      ::v-deep(.el-select__selected-item) {
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: normal;
        line-height: 19.6px;
        letter-spacing: 0px;
        font-variation-settings: 'opsz' auto;
        color: #2d3748;
      }

      ::v-deep(.el-input-group__append) {
        background-color: #2d7551 !important;
        color: #ffffff;
      }

      .s-btn {
        margin-left: 30px;
        width: 100%;
        font-family: Microsoft YaHei;
        font-size: 18px;
        font-weight: normal;
        line-height: 26px;
        letter-spacing: 0px;
        font-variation-settings: 'opsz' auto;
        color: #ffffff;
      }
    }
  }

  .r-n-content {
    width: 1400px;
    height: calc(100% - 160px);

    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 2px 0;
    overflow: hidden;

    .c-left {
      position: relative;
      width: 210px;
      overflow: auto;
      background: linear-gradient(270deg, #2f7e55 0%, #295f48 100%) !important;

      &::-webkit-scrollbar {
        width: 8px; // y轴滚动条宽度
        height: 5px; // x轴滚动条宽度
        background-color: #fff;
        border-radius: 5px;
      }

      &::-webkit-scrollbar-thumb {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(60 186 146))
        );
        border-radius: 5px;
        box-shadow: inset 0 0 6px #f4f4f5;
        transition: 0.3s ease-in-out;
      }

      .l-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;

        ::v-deep(.el-checkbox__label) {
          color: #ffffff;
        }
      }
    }

    .c-left::after {
      content: '';
      display: block;
      width: 100%;
      height: 150px;
      position: absolute;
      bottom: 0;
      background-image: url(@/assets/imgs/left-background-logo.png);
    }

    .c-middle {
      width: 950px;
      height: 100%;
      margin: 0 10px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #ffffff;

      &::-webkit-scrollbar {
        width: 8px; // y轴滚动条宽度
        height: 5px; // x轴滚动条宽度
        background-color: #fff;
        border-radius: 5px;
      }

      &::-webkit-scrollbar-thumb {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.44, #2c714f)
        );
        border-radius: 5px;
        box-shadow: inset 0 0 6px #f4f4f5;
        transition: 0.3s ease-in-out;
      }

      .m-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f6f6f6;
        height: 40px;
        padding: 0 10px;

        .m-t-left {
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #3d3d3d;

          span {
            color: #e53e3e;
          }
        }

        .m-t-right {
        }
      }

      .m-middle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        border-bottom: 1px solid #e2e8f0;

        .m-left {
          display: flex;
          justify-content: center;
          align-items: center;

          .m-l-checkbox {
            padding-right: 20px;
          }
        }

        .m-right {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .r-c-right {
      width: 300px;
      height: 100%;
      display: flex;

      .c-r-top {
        .t-tabs-box {
          background-color: #ffffff;
          padding: 0 10px 10px;
          margin-bottom: 10px;
        }
      }

      .r-tabs-tags {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .el-tag {
          margin-right: 10px;
        }
      }

      .r-tabs-character {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .t-c-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .t-round-box {
          width: 60px;
          height: 60px;
          opacity: 1;
          border-radius: 50%;
          background: #447d60;
          background-image: url(@/assets/imgs/r-character.png);
          background-size: auto;
          background-repeat: no-repeat;
          background-position: center;
        }

        .t-c-text {
          margin-top: 10px;
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: normal;
          line-height: 25.2px;
          letter-spacing: 0px;
          font-variation-settings: 'opsz' auto;
          color: #3d3d3d;
        }
      }

      .r-tabs-word {
        height: 240px;
      }
    }
  }
}

:deep(.el-tree-node__expand-icon) {
  display: none;
}

:deep(.is-focusable) {
  background-color: #2f7c54;
}

:deep(.el-tree-node__children) {
  .is-expanded {
    max-height: 500px;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0; // y轴滚动条宽度
    }
  }

  .el-tree-node__content {
    .el-checkbox {
      // padding-left: 30px;
      display: inline-block;
      box-sizing: border-box;
    }
  }

  .el-tree-node {
    background-color: #2a644a;
  }
}

:deep(.el-tree-node__content) {
  height: 40px;

  .el-checkbox {
    display: none;
    margin-top: 5px;
    margin-right: 2px;
  }

  .treeContent {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .treeCenter {
    text-align: center;
  }

  &:hover {
    background-color: #2f7c54 !important;
  }
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: transparent !important;
}

:deep(.el-input-group__append) {
  .searchbtn {
    padding: 0;
  }
}

.retrieval {
  height: 100%;
  flex-direction: column;
  justify-content: space-evenly;

  .form {
    display: flex;
    //overflow: auto;
    flex-direction: column;

    &::-webkit-scrollbar {
      width: 8px; // y轴滚动条宽度
      height: 5px; // x轴滚动条宽度
      background-color: #207073;
      border-radius: 5px;
    }

    &::-webkit-scrollbar-thumb {
      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #039595));
      border-radius: 5px;
      box-shadow: inset 0 0 6px #f4f4f5;
    }

    .form_item {
      padding: 0;
      margin: 5px 0;
    }
  }

  .searchSelect {
    line-height: 45px;
    border-radius: 25px 0 0 25px;
    outline: none;
    box-shadow: 0 0 0 0.5px var(--el-input-border-color, var(--el-border-color)) inset;

    option {
      height: 45px;
      line-height: 45px;
    }
  }

  .retrievalInput {
    border-radius: 0;
  }

  :deep(.el-input-group__append) {
    width: 30px;
    font-size: 28px;
    color: #fff;
    background-color: #039595;
    border-radius: 0 25px 25px 0;
  }
}

.advancedDialog {
  padding: 0 !important;
}

</style>
